<div xmlns:f="http://java.sun.com/jsf/core"
	  xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:pe="http://primefaces.org/ui/extensions">
	 <style>
	   
	      #m1p1_divWrapper{
		   width: 820px;
		   height: 550px;
		   font-size: 11px;
	 	}
    
   		#m1p1_divIzquierdo{
				
				float: left;
			width: 390px;
		}

    	#m1p1_divDerecho{
			
			  float: right;
			width: 420px;
		}
        
          #m1p1_divTablaResumenOrden{
            border: 1px solid #A8A8A8;
    	    border-radius: 2px;
		    height: 145px;
    	    width: 390px;		   
			margin-top: 0px;
			margin-left: 0px;
		    overflow: scroll;
        }
   
        /** estilos componentes primefaces **/ 
        #m1p1_dataGridMesas_content{
         	height: 390px; 
		}
	 
	 </style>
	 <script >
	   
	 </script>
	 <div id="m1p1_divWrapper">
		 <h:form id="m1p1_formConsultaSocios" class="formGral" prependId="false">
		  <div id="m1p1_divPrincipal" >
		  <div id="m1p1_divIzquierdo">
		     <p:fieldset id="m1p1_fieldMesas" legend="Mesas Disponibles" >
		      <p:dataGrid var="mesa" value="#{cajasBean.listaMesas}" columns="2" layout="grid"
        	   rows="6" paginator="true" id="m1p1_dataGridMesas" 
        	   paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        	  >
 			  <p:column>
              <p:panel header="Mesa #{mesa.numeroMesa}" style="text-align:center" >
                
                <h:panelGrid columns="1" style="width:100%" >
                
                  <h:outputText value="Status: #{mesa.status}" style="color: blue; font-weight: bold; " rendered="#{mesa.numeroStatus == 1}"/>
                  <h:outputText value="Status: #{mesa.status}" style="color: rgb(160,0,0); " rendered="#{mesa.numeroStatus == 0}"/>
                  <h:outputText value="Atiende: #{mesa.mesero}" rendered="#{mesa.numeroStatus == 1}" />
                  <h:outputText value="Total: #{mesa.total}"  rendered="#{mesa.numeroStatus == 1}"/>
                  <p:commandLink process="@this" update=":m1p1_formConsultaSocios:m1p1_fieldResumenOrden :m1p1_formConsultaSocios:m1p1_fieldDetalleCobro" title="Ver Detalle" actionListener="#{cajasBean.verDetalle(mesa)}">
                    <h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
                    <f:setPropertyActionListener value="#{mesa}" target="#{cajasBean.mesaSeleccionada}" />                   
                  </p:commandLink>
                </h:panelGrid>
                
              </p:panel>
              </p:column>
    	     </p:dataGrid>
		    </p:fieldset>
		  </div>
		 
		  <div id="m1p1_divDerecho">
		    <p:fieldset id="m1p1_fieldResumenOrden" legend="Resumen Mesa #{cajasBean.mesaSeleccionada.numeroMesa}" style="margin-bottom:20px">
		      <h:outputText id="m1p1_lblNumeroPersonas" value="Numero de Personas: #{cajasBean.mesaSeleccionada.numeroPersonas}" />
		      <div id="m1p1_divTablaResumenOrden">
		      <p:dataTable id="m1p1_tablaResumenOrden" value="#{cajasBean.listaDetalleOrden}" 
	    		    var="detalle"  >
	    		    
					<p:column id="m1p1_colProducto" >
						<f:facet name="header">Producto</f:facet>
						<h:outputText id="m1p1_lblProducto" value="#{detalle.producto}" style="font-weight: bold;"/>
					</p:column>
					<p:column id="m1p1_colCantidad" >
						<f:facet name="header">Cantidad</f:facet>
						<h:outputText id="m1p1_lblCantidad" value="#{detalle.cantidad}" >						    
						</h:outputText>
					</p:column>	
					<p:column id="m1p1_colPrecio" >
						<f:facet name="header">Precio</f:facet>
						<h:outputText id="m1p1_lblPrecio" value="#{detalle.precio}" >
						  <f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
						</h:outputText>
					</p:column>
					<p:column id="m1p1_colTotal" >
						<f:facet name="header">Total</f:facet>
						<h:outputText id="m1p1_lblSubtotal" value="#{detalle.subTotal}" >	
						   <f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>					    
						</h:outputText>
					</p:column>	
					
				</p:dataTable>
				</div>
		    </p:fieldset>
		    <p:fieldset id="m1p1_fieldDetalleCobro" legend="Detalle Ticket" style="margin-bottom:25px">
		      <table>
		        <tr>
		          <td style="width: 100px;"> <h:outputLabel id="m1p1_lblSubtotal" value="Subtotal: " styleClass="lblGral" /> </td>
		          <td> <p:inputText id="m1p1_txtSubtotal" value="#{cajasBean.detalleTicket.subTotal}" style="text-align: right;" readonly="true">
		                 <f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
		               </p:inputText> </td>
		        </tr>
		        <tr>
		          <td> <h:outputLabel id="m1p1_lblIva" value="Iva: " styleClass="lblGral" /> </td>
		          <td> <p:inputText id="m1p1_txtIva" value="#{cajasBean.detalleTicket.iva}" style="text-align: right;" readonly="true"> 
		                 <f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
		          	   </p:inputText> </td>
		        </tr>
		        <tr>
		          <td> <h:outputLabel id="m1p1_lblTotal" value="Total: " styleClass="lblGral" /> </td>
		          <td> <p:inputText id="m1p1_txtTotal" value="#{cajasBean.detalleTicket.total}" style="text-align: right;" readonly="true"> 
		          		 <f:convertNumber locale="es_MX" type="currency" currencySymbol="$"/>
		          		</p:inputText> </td>
		        </tr>
		        <tr>
		          <td> </td>
		          <td> <p:commandButton id="m1p1_btnTicket" value=" Imprimir Ticket " style="width:130px;"/> </td>
		          <td> <p:commandButton id="m1p1_btnCobrar" value="Cobrar" style="width:100px;"/> </td>
		        </tr>
		      </table>
		    </p:fieldset>
		    <p:fieldset legend="Opciones Caja" >
		      <table>
		         <tr> 
		           <td style="width: 115px;"> <p:commandButton id="m1p1_btnReporte" value="Reporte" style="width:100px;"/> </td>
		           <td> <p:commandButton id="m1p1_btnCorte" value="Cierre de Caja" style="width:130px;"/> </td>
		         </tr>
		        
		      </table>
		    </p:fieldset>
		  </div>
		  </div>
		 </h:form>
	 </div>
</div>